<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <head>
        <script src="../js/flexible_css.js"></script>
        <script src="../js/flexible.js"></script>
        <link rel="stylesheet" href="../css/index.css">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/css/swiper.min.css">
    </head>
</head>

<body>
    <!-- 导航logo -->
    <header>
        <div class="logo"></div>
        <div class="menu"></div>
    </header>
    <!-- 轮播 -->
    <div class="home swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide page1">
                <div class="mashine"></div>
                <div class="page1_content">
                    <h4>高端激光加工设备的领跑者</h4>
                    <p>采用进口激光器,光束质量好</p>
                    <p>光斑小,单脉冲能量高</p>
                    <a href="javascript:;">查看详情</a>
                </div>
            </div>
            <div class="swiper-slide page1"></div>
            <div class="swiper-slide page1"></div>
        </div>
        <div class="swiper-pagination home1"></div>
    </div>
    <!-- 新闻动态 -->
    <div class="news">
        <div class="news_title">
            <div class="news_title_left"></div>
            <a href="./news_list.html">了解更多 →</a>
        </div>
        <div class="news_content">
            <a href="javascript:;">
                <div class="news_content1">
                    <div class="date">05-10 2018</div>
                    <img src="../images/car.png" alt="">
                    <div class="news_content1_text">
                        <h4>汽车行业好帮手 三维激光切割……</h4>
                        <p>汽车工业是激光加工应用最多的领域之一,通</p>
                        <img src="../images/arraw_right.png" alt="">
                    </div>
                </div>
            </a>
            <a href="javascript:;">
                <div class="news_content1">
                    <div class="date date2">05-15 2018</div>
                    <img src="../images/film.png" alt="">
                    <div class="news_content1_text">
                        <h4>还在手工定制？戛纳都流行激光高级定制啦~</h4>
                        <p> 这款由Iris Van Herpen量身打造的高定礼服</p>
                        <img src="../images/arraw_right.png" alt="">
                    </div>
                </div>
            </a>
            <a href="javascript:;">
                <div class="news_content1">
                    <div class="date date2">05-10 2018</div>
                    <img src="../images/beaming.png" alt="">
                    <div class="news_content1_text">
                        <h4>激光切割机 让金属家居充满想像</h4>
                        <p>激光切割机应用给很多行业带来了变革</p>
                        <img src="../images/arraw_right.png" alt="">
                    </div>
                </div>
            </a>
            <a href="javascript:;">
                <div class="news_content1">
                    <div class="date date2">05-10 2018</div>
                    <img src="../images/aluminum.png" alt="">
                    <div class="news_content1_text">
                        <h4>全铝家具升温 金属激光切割机征服铝板</h4>
                        <p>长久以来家具的主要原料是木材，这样</p>
                        <img src="../images/arraw_right.png" alt="">
                    </div>
                </div>
            </a>
        </div>
    </div>
    <!-- 产品中心 -->
    <div class="product swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide page2">
                <div class="product_title">
                    <div class="product_title_left"></div>
                    <a href="./product_list.html">了解更多 →</a>
                </div>
                <div class="product_content">
                    <div class="product_content1">
                        <img src="../images/device.png" alt="">
                        <p>光纤激光塑料焊接设备</p>
                    </div>
                    <div class="product_content1">
                        <img src="../images/device2.png" alt="">
                        <p>皮秒激光加工模具</p>
                    </div>
                </div>
            </div>
            <div class="swiper-slide page2"></div>
            <div class="swiper-slide page2"></div>
        </div>
        <div class="swiper-pagination product1"></div>
    </div>
    <!-- 服务支持 -->
    <div class="service">
        <div class="service_title">
            <div class="service_title1"></div>
        </div>
        <div class="service_content">
            <p class="title">办公环境</p>
            <p class="content">办公环境整洁有序是我们一直保持的习惯， 公司就好比我们的大家庭，无论在人文环境包括文化、教育、 人际关系等因素。自然环境包括办公室所在地、建筑设计、 室内空气、光线、颜色、办公设备和办公室的布局、布置等因素。
            </p>
            <a href="./service_support.html">了解更多 →</a>
        </div>
        <div class="service_images">
            <img src="../images/service1.png" alt="">
            <img src="../images/service2.png" alt="">
            <img src="../images/service3.png" alt="">
            <img src="../images/service4.png" alt="">
        </div>
    </div>
    <!-- 底部 -->
    <div class="footer">
        <div class="advice">
            <div class="advice1">
                <a href="javascript:;">
                    <img src="../images/polygon.png" alt="">
                    <div class="advice_right">
                        <p class="title">打样申请</p>
                        <p class="content">提供免费打烊服务</p>
                    </div>
                </a>
            </div>
            <div class="advice1">
                <a href="javascript:;">
                    <img src="../images/polygon2.png" alt="">
                    <div class="advice_right">
                        <p class="title">暖心建议</p>
                        <p class="content">采纳每一份建议</p>
                    </div>
                </a>
            </div>
            <div class="advice1">
                <a href="javascript:;">
                    <img src="../images/polygon3.png" alt="">
                    <div class="advice_right">
                        <p class="title">咨询服务</p>
                        <p class="content">提供24小时人工服务</p>
                    </div>
                </a>
            </div>
        </div>
        <div class="navigate">
            <a href="./about.html">
                <div class="navigate1">
                    <p>关于我们</p>
                    <span class="arrow_right"></span>
                </div>
            </a>
            <a href="javascript:;">
                <div class="navigate1">
                    <p>产品中心</p>
                    <span class="arrow_right"></span>
                </div>
            </a>
            <a href="javascript:;">
                <div class="navigate1">
                    <p>新闻咨询</p>
                    <span class="arrow_right"></span>
                </div>
            </a>
            <a href="./link.html">
                <div class="navigate1">
                    <p>联系我们</p>
                    <span class="arrow_right"></span>
                </div>
            </a>
        </div>
        <div class="copyright">
            <p>Copyright 2014-2018 杭州银湖激光科技有限公司</p>
            <p>All rights reserved</p>
        </div>
    </div>
    <!-- 打样申请弹出框 -->
    <div class="apply_popup">
        <h3>打样申请</h3>
        <span class="close"></span>
        <form action="">
            <div class="box">
                <label for="name">联系人</label>
                <input type="text" id="name" name="name">
            </div>
            <div class="box">
                <label for="tel">联系电话</label>
                <input type="text" id="tel" name="tel">
            </div>
            <div class="box">
                <label for="company">公司名称</label>
                <input type="text" id="company" name="company">
            </div>
            <div class="box">
                <label for="address">公司地址</label>
                <input type="text" id="address" name="address">
            </div>
            <div class="box">
                <label for="quality">加工材质</label>
                <input type="text" id="quality" name="quality">
            </div>
            <div class="box">
                <label for="makings">材料厚度</label>
                <input type="text" id="makings" name="makings">
            </div>
            <div class="box">
                <label for="detail">详细需求</label>
                <input type="text" id="detail" name="detail">
            </div>
            <button type="submit">提交</button>
        </form>
    </div>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/js/swiper.min.js"></script>
    <script>
        var swiper = new Swiper('.home', {
            direction: 'horizontal',
            loop: true,
            pagination: {
                el: ".swiper-pagination.home1",
            }
        })
        var swiper2 = new Swiper('.product', {
            direction: 'horizontal',
            loop: true,
            autiplay: true,
            pagination: {
                el: ".swiper-pagination.product1",
            }
        })
        $(function () {
            $('.advice1:first').click(function () {
                $('.apply_popup').show();
            })
            $('.close').click(function () {
                $('.apply_popup').hide();
            })
        })
        var is_show = false;
        $('.menu').click(function () {
            // $('.navigate').toggle();
            is_show = !is_show;
            if (is_show) {
                $('.navigate').css('right', 0);
            } else {
                $('.navigate').css('right', '-50%');
                // is_show = !is_show;
            }
        })
        if (/Android [4-6]/.test(navigator.appVersion)) {
            window.addEventListener('resize', function () {
                if (document.activeElement.tagName === 'INPUT' || document.activeElement.tagName === 'TEXTAREA') {
                    window.setTimeout(function () {
                        document.activeElement.scrollIntoViewIfNeeded()
                    }, 0)
                }
            })
        }
    </script>
</body>

</html>